<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>优惠券</span>
            </div>
        </div>
        <div class="flex-bet pad_l_20">
            <div class="coupon-item">
                <div>
                    <div class="fon_16 color_3">满减券</div>
                    <div class="fon_12 color_6 lh22 pad_t_10">
                        <p>例：满100元减20元<br>便于合理控制活动成本</p>
                    </div>
                </div>
                <el-button type="primary" @click="handleEdit('1')" size="medium" class="mar_t10">立即创建</el-button>
            </div>
            <div class="coupon-item">
                <div>
                    <div class="fon_16 color_3">折扣券</div>
                    <div class="fon_12 color_6 lh22 pad_t_10">
                        <p>例：满100元打9折<br>提高店铺销量和客单价</p>
                    </div>
                </div>
                <el-button type="primary" @click="handleEdit('2')" size="medium" class="mar_t10">立即创建</el-button>
            </div>
            <div class="coupon-item">
                <div>
                    <div class="fon_16 color_3">商品兑换券</div>
                    <div class="fon_12 color_6 lh22 pad_t_10">
                        <p>用于兑换指定商品<br>吸引顾客消费</p>
                    </div>
                </div>
                <el-button type="primary" @click="handleEdit('3')" size="medium" class="mar_t10">立即创建</el-button>
            </div>
<!--            <div class="coupon-item">-->
<!--                <div>-->
<!--                    <div class="fon_16 color_3">配送券</div>-->
<!--                    <div class="fon_12 color_6 lh22 pad_t_10">-->
<!--                        <p>例：满100元减20元<br>满足条件立享减免配送费</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <el-button type="primary" @click="handleEdit" size="medium" class="mar_t10">立即创建</el-button>-->
<!--            </div>-->
        </div>
        <div class="pad_20 flex-bet flex-y-top">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                    <el-form-item label="优惠券名称">
                        <el-input v-model="formInline.name" size="medium" placeholder="请输入优惠券名称" @input="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券类型">
                        <el-select v-model="formInline.type" placeholder="请选择" @change="onSearch">
                            <el-option
                                    v-for="item in labelOptions"
                                    :key="item.label"
                                    :label="item.value"
                                    :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="门店优惠券" name="1"></el-tab-pane>
            <el-tab-pane label="平台优惠券" name="2"></el-tab-pane>
        </el-tabs>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="name"
                        label="优惠券名称"
                        width="240"
                >
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="优惠券类型"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.type=='1'"><el-tag size="mini" type="success">满减券</el-tag></div>
                        <div v-if="scope.row.type=='2'"><el-tag size="mini">折扣券</el-tag></div>
                        <div v-if="scope.row.type=='3'"><el-tag size="mini" type="warning">商品兑换券</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="isFull"
                        label="优惠内容"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.type=='3'">兑换商品：<div>{{ scope.row.discount }}</div></div>
                        <div v-if="scope.row.isFull=='1' && scope.row.type=='1'">无门槛 减{{scope.row.money}}</div>
                        <div v-if="scope.row.isFull=='1' && scope.row.type=='2'">无门槛 打{{scope.row.discount}}折</div>
                        <div v-if="scope.row.isFull=='2' && scope.row.type=='1'">满{{scope.row.fullMoney}} 减{{scope.row.money}}</div>
                        <div v-if="scope.row.isFull=='2' && scope.row.type=='2'">满{{scope.row.fullMoney}} 打{{scope.row.discount}}折</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="活动时间"
                        width="200"
                >
                    <template slot-scope="scope">
                        <div>{{scope.row.startTime}}</div>
                        <div>{{scope.row.endTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="已使用/使用率">
                  <template slot-scope="scope">
                    <div>
                      <span class="subjectcolor2">{{scope.row.cardUse}}</span>
                      / {{scope.row.cardLv}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="已领取/优惠券总量"
                >
                    <template slot-scope="scope">
                        <div><span class="subjectcolor2">{{scope.row.receiveNum}}</span>/{{scope.row.stock}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="display"
                        label="状态"
                        v-if="activeName!='2'"
                >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                   @change="changeSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        v-if="activeName!='2'"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit3(scope.row)">推广</el-button>
                            <el-button type="text" @click="handleEdit2(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
<!--            <edit ref="edit" @fetchData="fetchData"></edit>-->
        </div>
      <el-dialog
          title="查看小程序推广码"
          :visible.sync="dialogFormVisible"
          width="600px"
          :close-on-click-modal="false"
      >
        <div class="t_c">
          <div class="pad_20">
            <img :src="codeimg" style="width: 200px;height: 200px;">
          </div>
          <div class="flex-center mar_l20">
            <div>小程序链接：yb_wm/my/coupon/coupon-dl?id={{codeimgId}}</div>
            <div class="mar_l10">
              <el-button type="text" @click="copyText('yb_wm/my/coupon/coupon-dl')">复制</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          title="删除优惠券"
          :visible.sync="dialogFormVisible2"
          width="600px"
          :close-on-click-modal="false"
      >
        <div class="t_c">
          <el-radio-group v-model="selectDel">
            <el-radio label="2">用户已领取的优惠券可正常使用</el-radio>
            <el-radio label="3">一并删除</el-radio>
          </el-radio-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="handleDelete2">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
    import {couponList,modifyCoupon} from "@/api/plug";
    import {mapState} from "vuex";
    import {getCode} from "@/api/setup";

    export default {
        created() {
            this.fetchData();
        },
        computed: {
            ...mapState(['storeId']),
        },
        data() {
            return {
                formInline: {
                    name: '',
                    type: '',
                },
                activeName: '1',
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                labelOptions:[
                    {
                        label:1,
                        value:'优惠券',
                    },
                    {
                        label:2,
                        value:'折扣券',
                    },
                    {
                      label: 3,
                      value: '商品兑换券'
                    }
                ],
                codeimg:'',
                codeimgId:'',
                dialogFormVisible:false,
                dialogFormVisible2:false,
                selectDel:'2',
                selectId:'',
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await couponList({page: this.page.currentPage,name:this.formInline.name,type:this.formInline.type,storeId:this.storeId,couponType:this.activeName});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            async handleTabClick() {
                this.fetchData();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            onSearch(){
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await modifyCoupon({id: row.id, display: row.display,type:1,storeId:this.storeId});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
              this.dialogFormVisible2 = true
              this.selectId = row.id
                // if (row.id) {
                //     this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                //         const {msg} = await modifyCoupon({id: row.id,type:2,storeId:this.storeId});
                //         this.$baseMessage(msg, "success");
                //         this.fetchData();
                //     });
                // } else {
                //     if (this.selectRows.length > 0) {
                //         const id = this.selectRows.map((item) => item.id);
                //         this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                //             const {msg} = await modifyCoupon({id,type:2,storeId:this.storeId});
                //             this.$baseMessage(msg, "success");
                //             this.fetchData();
                //         });
                //     } else {
                //         this.$baseMessage("未选中任何行", "error");
                //         return false;
                //     }
                // }
            },
            handleEdit(type) {
                if (type) {
                    this.$router.push(`/storecouponAdd?type=${type}`);
                } else {
                    this.$router.push({path: 'storecouponAdd'})
                }
            },
            handleEdit2(row) {
                if (row.id) {
                    this.$router.push(`/storecouponAdd?id=${row.id}&type=${row.type}`);
                } else {
                    this.$router.push({path: 'storecouponAdd'})
                }
            },
          handleDelete2(){
            if (this.selectId) {
              this.$baseConfirm('你确定要删除此券吗？', null, async () => {
                const { msg } = await modifyCoupon({ id: this.selectId, type: this.selectDel ,storeId:this.storeId});
                this.$baseMessage(msg, 'success');
                this.dialogFormVisible2 = false
                this.fetchData();
              });
            }
          },
          copyText(row) {
            let Url2 = row;
            var oInput = document.createElement('input');
            oInput.value = Url2;
            console.log(oInput.value);
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.className = 'oInput';
            oInput.style.display = 'none';
            this.$message({
              message: '复制成功',
              type: 'success'
            });
          },
          async handleEdit3(row) {
            this.dialogFormVisible = true
            const {data} = await getCode({ident: 'couponCenterDl', page: `yb_wm/my/coupon/coupon-dl?id=${row.id}`,id:row.id});
            this.codeimg = data ? data : ''
            this.codeimgId = row.id
          },
        }
    }
</script>
<style lang="scss" scoped>
    .coupon-item {
        white-space: nowrap;
        padding: 20px 27px 17px;
        display: flex;
        flex-direction: column;
        background: rgba(51,136,255,.07);
        margin-right: 20px;
        flex: 1;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        border-radius: 5px;
    }
</style>
